<template>
  <div class="info" style="margin-top: 15px">
    <!--表单区    -->
    <div class="form">
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" layout="vertical">
        <a-row>
          <a-col :span="12">
            <a-form-item label="标识" v-bind="validateInfos.key">
              <a-input v-model:value="modelRef.key" disabled placeholder="请输入角色英文标识" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="名称" v-bind="validateInfos.name">
              <a-input v-model:value="modelRef.name" :disabled="isDetl" placeholder="请输入角色名称" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-item label="描述" v-bind="validateInfos.describe">
              <a-textarea
                v-model:value="modelRef.describe"
                placeholder="备注"
                :disabled="isDetl"
                :auto-size="{ minRows: 2, maxRows: 2 }"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--页脚按钮    -->
    <div class="=foot">
      <a-space :size="8">
        <a-button type="primary" @click="onSubmit">保存</a-button>
        <a-button @click="onReset">重置</a-button>
      </a-space>
    </div>
  </div>
</template>

<script>
import { defineComponent, toRaw, ref, watch, defineEmits, toRefs, inject, reactive, nextTick } from 'vue'
import { Form } from 'ant-design-vue'
const useForm = Form.useForm
import factory from '../../factory'
import exp from '@/utils/regular'

export default defineComponent({
  emits: ['update-success'],
  setup(props, ctx) {
    const { currentItemId } = inject('roleParams')
    const modelRef = reactive({
      key: '',
      name: '',
      describe: '',
    })
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: '请输入名称',
        },
        {
          max: 25,
          message: '最多输入25个字符',
        },
        {
          pattern: exp.name.pattern,
          message: exp.name.message,
        },
      ],
      key: [
        {
          required: true,
          message: '请输入英文标识',
        },
        {
          max: 20,
          message: '最多输入20个字符',
        },
        {
          pattern: exp.key.pattern,
          message: exp.key.message,
        },
      ],
      describe: [
        {
          max: 127,
          message: '最多输入127个字符',
        },
      ],
    })
    const { validate, validateInfos } = useForm(modelRef, rulesRef, {
      //表单验证的输出: 字段 值 提示
      onValidate: (...args) => {
        console.log('表单验证的输出: 字段 值 提示', ...args)
      },
    })

    //==保存==============================
    const onSubmit = () => {
      validate()
        .then(() => {
          //表单验证无误后执行
          save()
        })
        .catch((err) => {
          console.log('error', err)
        })
    }
    const save = () => {
      factory.upPermisGroup(modelRef).then((res) => {
        ctx.emit('update-success', modelRef)
      })
    }

    //==显示 =================================
    const title = ref('详情')
    const isDetl = ref(false)
    for (let key in currentItemId.value) {
      modelRef[key] = currentItemId.value[key]
    }
    //==重置==================================
    const isReset = ref(true)
    const onReset = () => {
      isReset.value = false
      nextTick(() => {
        isReset.value = true
      })

      for (let key in currentItemId.value) {
        modelRef[key] = currentItemId.value[key]
      }
    }

    return {
      onSubmit,
      title,
      validateInfos,
      modelRef,
      isDetl,
      currentItemId,
      onReset,
      isReset,
    }
  },
})
</script>

<style scoped></style>
